<template>
  <view class="page">
    <!-- 订单上部 start -->
    <view class="cu-custom header">
      <!-- 标题栏 start -->
      <view class="cu-bar fixed bg" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
        <view class="action" @tap="back">
          <text class="cuIcon-back"></text>
        </view>
        <view class="content" :style="[{ top: StatusBar + 'px' }]">{{i18n['订单详情']}}</view>
      </view>
      <!-- 标题栏 end -->
      <!-- 订单状态 start -->
      <view :style="{ height: CustomBar + 'px' }"></view>
      <view class="flex flex-direction align-center" :style="{ height: 'calc(100% - ' + CustomBar + 'px)' }">
        <view class="text-lg text-white flex justify-center align-end padding-bottom-sm">
          <text v-if='final_status ==1 || order_type !=7'>
            <text class="cuIcon-present margin-right-sm"></text>
            {{ orderStatus | filterStatus }}
          </text>
        </view>
      </view>
      <!-- 订单状态 end -->
    </view>
    <!-- 订单上部 end -->
    <view class="box">
      <!-- 地址栏  start-->
      <view class="padding-lr-sm margin-bottom-sm" v-if="addrInfo">
        <view class="bg-white radius-20 flex padding">
          <view class="fu-cred margin-right-sm">
            <text class="cuIcon-locationfill"></text>
          </view>
          <view class="flex-sub">
            <view class="text-333 text-df text-bold">
              <text>{{ addrInfo.receiver_name }}</text>
              <text class="margin-left">{{
                addrInfo && addrInfo.receiver_mobile | filterMobile
              }}</text>
            </view>
            <view class="margin-top-xs text-cut-2 text-999 text-df">{{i18n['地址']}}: {{ addrInfo.receiver_address }}</view>
          </view>
        </view>
      </view>
      <!-- 地址栏  end -->
      <!-- 主要订单信息  start-->
      <view class="padding-lr-sm margin-bottom-sm">
        <view class="padding bg-white radius-20">
          <!-- 商品信息 start -->
          <block v-for="(item, index) in goodsInfo" :key="index">
            <view>
              <view class="flex padding-tb-sm" @click="navToGoodsDetail(item)">
				  <view class="img-168 radius overHidden">
					  <fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image>
				  </view>
                <view class="goods-info margin-left-sm">
                  <view class="text-df text-333 text-cut-2">{{item.goods_name}}</view>
                  <view class="text-sm text-999 margin-bottom text-cut">{{item.sku_name || ''}}</view>
                  <view class="flex justify-between">
                    <text class="text-lg text-bold fu-cred">
                      <text>{{item.sales_integral || 0}}</text>
                      <text style="font-size: 18rpx;">{{i18n['积分']}}</text>
                      <text v-if="payable_money>0" style="padding:0 10rpx;">+</text>
                      <text v-if="payable_money>0" class="text-price text-df"></text>
                      <text v-if="payable_money>0">{{ item.shop_price }} </text>
                    </text>
                    <text class="text-sm text-666 text-bold">
                      <text class="margin-right-xs">x</text>
                      {{ item.num }}
                    </text>
                  </view>
                </view>
              </view>
              <view class="text-right margin-bottom-sm" v-if="item.refund_info && item.refund_info.status == 0" style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['售后处理中']}}</view>
              <view class="text-right margin-bottom-sm" v-if="item.refund_info && item.refund_info.status == -2" style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['用户取消']}}</view>
              <view class="text-right margin-bottom-sm" v-if="item.refund_info && item.refund_info.status == -1" style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['商家驳回']}}</view>
              <view class="text-right margin-bottom-sm" v-if="item.refund_info && item.refund_info.status == 1" style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['同意退款']}}</view>
              <view class="text-right margin-bottom-sm" v-if="item.refund_info && item.refund_info.status == 2" style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['确认收回']}}</view>
              <view class="text-right margin-bottom-sm" v-if="item.refund_info && item.refund_info.status == 3" style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['退款成功']}}</view>
              <view class="flex justify-end">
                <button class="cu-btn round line-theme margin-left-sm sm" v-if="
                    orderStatus >= 1 &&
                    orderStatus <= 4 &&
                    item.is_aftersale == 0
                    && (final_status ==1 || order_type != 7)
                  "
                  @tap="afterSaleOrder(item)">
                  {{i18n['申请售后']}}
                </button>
                <button class="cu-btn round line-theme margin-left-sm sm" v-if="orderStatus >= 1 &&
                    orderStatus <= 4 &&
                    item.is_aftersale == 1"
                  @tap="toAfterDetail(item.refund_id)">
                  {{i18n['查看售后详情']}}
                </button>
                <button class="cu-btn round line-theme margin-left-sm sm" @tap="toCustomer(item)">
                  {{i18n['联系客服']}}
                </button>
              </view>
            </view>
          </block>
          <!-- 商品信息 end -->
          <view class="solid-top margin-top padding-top-xs">
            <view class="flex justify-between align-center text-df padding-tb-sm">
              <text class="text-999">{{i18n['商品总额']}}</text>
              <text>
                <text class="text-bold text-333">{{sales_integral}}</text>
                <text style="font-size: 20rpx; " class="text-bold text-333 ">{{i18n['积分']}}</text>
                <text v-if="payable_money>0" style="padding:0 10rpx;">+</text>
                <text v-if="payable_money>0" class="text-333 text-bold text-price text-df">{{ order_money }}</text>
              </text>
            </view>
      <!--      <view class="flex justify-between align-center text-df padding-tb-sm">
              <text class="text-999">运费</text>
              <text v-if="express_price" class="text-333 text-bold text-price text-df"> {{ express_price }}</text>
              <text v-else class="text-333 text-bold">免邮</text>
            </view> -->
            <view class="flex justify-end align-center padding-top-sm">
              <text v-if="orderStatus == 0 && order_type !=7" class="text-df text-999 margin-right">{{i18n['需付款']}}:</text>
              <text v-if='orderStatus != 0 && order_type !=7' class="text-df text-999 margin-right">{{i18n['总额']}}:</text>
              <text class="text-333 text-bold">
                <text class="text-xl">{{sales_integral}}</text>
                <text style="font-size: 20rpx; " class="text-xl">{{i18n['积分']}}</text>
                <text v-if="payable_money>0" style="padding:0 10rpx;">+</text>
                <text v-if="payable_money>0" class="text-price text-df"></text>
                <text v-if="payable_money>0" class="text-xl">{{ payable_money }}</text>
              </text>
            </view>
          </view>
        </view>
      </view>
      <!-- 主要订单信息  end-->
      <!-- 次要订单信息  start-->
      <view class="padding-lr-sm margin-bottom-sm">
        <view class="padding bg-white radius-20 text-df text-333">
          <view class="list-item flex align-center" v-if="marks">
            <view class="title">{{i18n['订单备注']}}:</view>
            <view class="text-sm" style="word-break: break-all">{{
              marks
            }}</view>
          </view>
          <view class="list-item flex">
            <view class="title">{{i18n['订单编号']}}:</view>
            <view class="text-df">{{ order_sn }}</view>
          </view>
          <view class="list-item flex">
            <view class="title">{{i18n['下单时间']}}:</view>
            <view class="text-df">{{ createTime }}</view>
          </view>
          <view class="list-item flex" v-if="payType">
            <view class="title">{{i18n['支付金额']}}:</view>
            <view class="text-df text-price">{{ payable_money }}</view>
          </view>
          <view class="list-item flex" v-if="payType">
            <view class="title">{{i18n['支付方式']}}:</view>
            <view class="text-df">{{ payType | filterPay }}</view>
          </view>
          <view class="list-item flex" v-if="payTime && orderStatus != 0 && orderStatus != -1">
            <view class="title">{{i18n['支付时间']}}:</view>
            <view class="text-df">{{ payTime }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 次要订单信息  end-->
    <!-- 底部按钮组 start-->
    <view class="goods-actions bg-white padding-lr-sm">
      <!-- v-if="orderStatus <= 4" -->
      <button class="cu-btn round margin-left-sm" v-if="
          orderStatus == -1 ||
          orderStatus == 4 ||
          orderStatus == 3 ||
          orderStatus == 7"
        @tap="delOrder">
        {{i18n['删除订单']}}
      </button>
      <button class="cu-btn round margin-left-sm" v-if="orderStatus == 0" @tap="cancelOrder">
        {{i18n['取消订单']}}
      </button>
      <button class="cu-btn round margin-left-sm" v-if="orderStatus == 1 && is_remind_info == 0  && (order_type != 7 || final_status ==1)"
        @tap="remindOrder">
        {{i18n['提醒发货']}}
      </button>
      <button class="cu-btn round margin-left-sm disabled" disabled v-if="orderStatus == 1 && is_remind_info == 1  && (order_type != 7 || final_status ==1)">
        {{i18n['已提醒']}}
      </button>
      <button class="cu-btn round margin-left-sm" v-if="orderStatus == 3" @tap="evaluateOrder()">
        {{i18n['评价']}}
      </button>
      <button class="cu-btn round margin-left-sm" v-if="orderStatus == 2" @tap="seelogs">
        {{i18n['查看物流']}}
      </button>
      <button class="cu-btn round margin-left-sm" v-if="orderStatus == 2" @tap="receiveOrder">
        {{i18n['确认收货']}}
      </button>
    </view>
    <!-- 底部按钮组 end -->
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>
<script>
  let i18n = global.i18n;
  const statusObj = {
    "-1": i18n["已取消"],
    0: i18n["等待买家付款中"],
    1: i18n["订单已付款，等待卖家发货"],
    2: i18n["卖家已发货"],
    3: i18n["交易成功"],
    4: i18n["订单已评价"],
    5: i18n["售后处理中"],
    6: i18n["退款成功"],
  }; //声明常量 支付状态
  export default {
    data() {
      return {
        StatusBar: this.StatusBar, //状态栏 高度
        CustomBar: this.CustomBar, // 标题栏高度
        order_sn: null, // 订单编号
        order_type: null, // 订单类型
        orderStatus: null, // 订单状态
        final_status: null, // 尾款支付状态
        createTime: "", // 下单时间
        addrInfo: null, // 下单地址
        goodsInfo: [], // 下单商品
        feightInfo: 0, // 运费
        goodsPrice: 0, // 商品金额
        payType: null, // 支付类型
        payTime: null, // 支付时间
        order_money: 0, //商品总额
        sales_integral: 0, //销售积分
        coupon_money: 0, // 优惠金额
        payable_money: 0, // 实付款
        express_price: 0, // 运费
        endtime: "", // 倒计时
        marks: "", //订单备注
        status: null, //订单状态
        is_remind_info: null, //提醒发货
      };
    },

    /**
     * @description  接受参数 初始化
     * @param {Object} option order_sn:订单编号    status:支付状态   order_type：订单类型
     */
    onLoad(option) {
      const {
        order_sn,
        status,
        order_type,
      } = option;
      this.order_sn = order_sn;
      this.order_type = order_type;
      this.status = status;
      uni.$on("updateOrderDetail", (data) => {
        this.getData();
      });
    },
    onShow() {
      this.getData();
    },
    filters: {
      //过滤订单状态  显示文本
      filterStatus(val) {
        val = val + "";
        if (!val) return "";
        return statusObj[val + ""];
      },
      //过滤支付状态  显示文本
      filterPay(val) {
        const datas = {
          balance: global.i18n["余额支付"],
          wxpay: global.i18n["微信支付"],
          alipay: global.i18n["支付宝支付"],
          minipay: global.i18n["小程序支付"],
          minipay_mix: global.i18n["小程序支付"],
        };
        return datas[val];
      },
      //显示手机 隐藏中间部分
      filterMobile(val) {
        if (!val) return "";
        return val.substr(0, 3) + "****" + val.substr(-4);
      },
    },
    onUnload() {
      uni.$off("updateOrderDetail");
    },
    onPullDownRefresh() {
      this.getData();
    },
    methods: {
      /**
       * @description  获取订单详情
       */
      getData() {
        const data = {
          order_sn: this.order_sn,
          order_type: this.order_type,
          is_son: 1,
        };
        this.$api
          .get(global.apiUrls.getOrderDetail, data)
          .then((res) => {
            this.is_remind_info = res.data.data.is_remind.info;
            console.log("订单详情: ", res);
            if (res.data.code == 1) {
              const data = res.data.data;
              this.goodsInfo = data.order_goods_list;
              this.orderStatus = data.status; // 订单状态
              this.final_status = data.final_status; // 尾款状态
              this.refundStatus = data.refund_status
              this.order_sn = data.order_sn;
              this.createTime = data.create_time;
              this.payTime = data.pay_time;
              this.payType = data.pay_type;
              this.coupon_money = data.coupon_money;
              this.order_money = data.order_money;
              this.sales_integral = data.cost_integral;
              this.payable_money = data.payable_money;
              this.express_price = data.order_info && data.order_info.express_price;
              this.marks = data.order_info && data.order_info.remark;
              if (data.order_info && data.order_info.address_id) {
                this.addrInfo = {
                  receiver_mobile: data.order_info.receiver_mobile,
                  receiver_name: data.order_info.receiver_name,
                  receiver_address: `${data.order_info.province} ${data.order_info.city} ${data.order_info.district} ${data.order_info.receiver_address}`,
                };
              }
              uni.stopPullDownRefresh();
            }
          })
          .catch((err) => {
            console.log("err: " + JSON.stringify(err));
          });
      },
      /**
       * @description 查看售后
       * @param {Object} id ：订单id
       */
      toAfterDetail(id) {
        console.warn('xxxxx', id)
        this.$urouter.navigateTo({
          url: "/pages/order/afterorder/afterorder-detail/index",
          params: {
            id: id,
          },
        });
      },
      /**
       * @description 取消订单
       */
      cancelOrder() {
        this.$util.showModal({
          title: this.i18n["提示"],
          content: this.i18n["确定要取消订单吗?"],
          success: (res) => {
            if (res.confirm) {
              this.$api
                .post(global.apiUrls.postCancelOrder, {
                  order_sn: this.order_sn,
                })
                .then((res) => {
                  console.log("取消订单操作", res);
                  if (res.data.code == 1) {
                    this.$message.info(this.i18n["提交成功,正在为您取消订单"]);
                    setTimeout(() => {
                      this.getData();
                    }, 800);
                  }
                });
            }
          },
        });
      },
      /**
       * @description  删除订单
       */
      delOrder() {
        this.$util.showModal({
          title: this.i18n["确认删除此订单?"],
          content: this.i18n["删除后不可恢复"],
          success: (res) => {
            if (res.confirm) {
              this.$api
                .post(global.apiUrls.postDelOrder, {
                  order_sn: this.order_sn,
                })
                .then((res) => {
                  console.log("res: " + JSON.stringify(res));
                  if (res.data.code == 1) {
                    this.$message.info(this.i18n["删除成功"]);
                    uni.$emit("refreshOrder");
                    setTimeout(function() {
                      uni.navigateBack();
                    }, 800);
                  }
                });
            }
          },
        });
      },

      /**
       * @description  联系客服
       * @param {Object} item 订单详情
       */
      toCustomer(item) {
        let data = {
          order_sn: this.order_sn,
          orderStatus: statusObj[this.orderStatus],
          createTime: this.createTime,
          goods_thumb: item.goods_thumb,
          goods_name: item.goods_name,
          goods_price: item.goods_money,
          goods_id: item.goods_id,
          user_name: this.addrInfo.receiver_name,
          user_phone: this.addrInfo.receiver_mobile,
          user_address: this.addrInfo.receiver_address,
        };
        try {
          uni.setStorageSync("CustomerCacheData", data);
        } catch (err) {
          console.log(err);
        }

        this.$urouter.navigateTo({
          url: "/pages/service-message/service/service-detail/index",
          params: {
            kid: 1,
            goods_id: item.goods_id,
            activity_id: item.activity_id || 0
          },
        });
      },
      /**
       * @description 提醒发货
       * @param {Object} sn 订单编号
       */
      remindOrder(sn) {
        this.$api
          .post(global.apiUrls.postRemindShipment, {
            order_sn: this.order_sn,
          })
          .then((res) => {
            if (res.data.code == 1) {
              this.$message.info(this.i18n["已提醒,请耐心等待"]);
              this.is_remind_info = 1
            }
          });
      },
      /**
       * @description 确认收货
       */
      receiveOrder() {
        this.$util.showModal({
          title: this.i18n["提示"],
          content: this.i18n["您是否确认收到货物?"],
          success: (res) => {
            if (res.confirm) {
              this.$api
                .post(global.apiUrls.postConfirmOrder, {
                  order_sn: this.order_sn,
                })
                .then((res) => {
                  console.log("res: " + JSON.stringify(res));
                  if (res.data.code == 1) {
                    this.getData();
                    uni.$emit("refreshOrder");
                  }
                });
            }
          },
        });
      },
      /**
       * @description 查看物流
       */
      seelogs() {
        this.$urouter.navigateTo({
          url: "/pages/order/orderdetail/express-delivery/index",
          params: {
            order_sn: this.order_sn,
          },
        });
      },
      /**
       * @description 订单评价
       */
      evaluateOrder() {
        uni.setStorageSync('order_goods_list', JSON.stringify(this.goodsInfo));
        this.$urouter.navigateTo({
          url: "/pages/order/evaluation/order-evaluation/index",
          params: {
            order_sn: this.order_sn,
            order_type: this.order_type
          },
        });
      },
      /**
       * @description 申请售后
       * @param {Object} item 订单信息
       */
      afterSaleOrder(item) {
        if (this.orderStatus == 0 || this.orderStatus == -1) {
          uni.showToast({
            title: this.i18n['确认收货后才能申请售后'],
            duration: 2000,
            icon: 'none'
          });
        } else {
          item.order_sn = this.order_sn;
          item.status = this.status;
          this.$urouter.navigateTo({
            url: "/pages/order/afterorder/afterorder-apply/index",
            params: {
              order_sn: item.order_sn,
              goods_id: item.goods_id,
              sku_id: item.sku_id,
              status: item.status
            },
          });
        }
      },
      /**
       * @description  返回
       */
      back() {
        uni.navigateBack({
          delta: 1,
        });
      },
      /**
       * @description 去商品详情
       * @param {Object} item 订单详情
       */
      navToGoodsDetail(item) {
        console.log(item, 1212)
        uni.navigateTo({
          url: `/pages/integral/integralgoods/integral-goods-detail/index?goods_id=${item.goods_id}&sku_id=${item.sku_id}&activity_id=${item.activity_id}`,
        });
      },
    },

  };
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100vh;
    background-color: #f8f8f8;
    padding-bottom: 100rpx;
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

    // 订单上部 start
    .header {
      height: 330rpx;
      background: $bgtheme;
      color: #ffffff;

      .bg {
        background: $bgtheme;
      }
    }

    // 订单上部 end

  }

  //订单主要信息 start
  .box {
    width: 100%;
    transform: translateY(-45rpx);

    .order-type {
      height: 150rpx;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .scroll-box {
      height: calc(100% - 200rpx);
    }

    .list-item {
      align-items: center;

      .title {
        min-width: calc(4em + 15px);
        font-size: 28rpx;
      }
    }

    .list-item+.list-item {
      margin-top: 20rpx;
    }
  }

  //订单主要信息 end
  .disabled {
    background: #aaaaaa !important;
  }

  // 商品信息 start
  .title {
    width: 120rpx;
  }

  .goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;

    &>view {
      width: 100%;
    }
  }

  // 商品信息 end
  // 底部按钮组 start
  .goods-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100rpx;
    height: calc(100rpx + constant(safe-area-inset-bottom));
    height: calc(100rpx + env(safe-area-inset-bottom));
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .cu-btn {
      color: #333;
      border: 1rpx solid #333;
      font-size: 24rpx;
      background-color: #ffffff;
      margin-right: 20rpx;
    }

    .cu-btn:last-child {
      border: none;
      background: $bgtheme;
      color: #ffffff;
    }
  }

  // 底部按钮组 end
  //商品图片 start
  .img-168 {
    width: 168rpx;
    height: 168rpx;
    background-color: #eeeeee;
    border-radius: 20rpx;
  }

  //商品图片 end
</style>
